<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">

<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript" src="control.js"></script>
<script type="text/javascript" src="model.js"></script>
<script type="text/javascript" src="view.js"></script>

<link rel="stylesheet" type="text/css" href="main.css">

<title>Track Server</title>

</head>
<body>
	<div id="frameHeader" class="header">Track Server</div>

	<!-- Navigation Panel -->
	<div id="frameNav" class="nav">

		<div id="panelNavWorking" class="working hidden">
			<img alt="loading" src="loading.gif">
		</div>

		<!-- Login Form -->
		<div id="panelLogin" class="hidden">
			<div id="labelLoginMessage"></div>
			Name: <input type="text" id="txtLoginName"><br>
			Password: <input type="password" id="txtLoginPassword"><br>
			<button id="btnLogin">Login</button>
		</div>

		<!-- Navigation -->
		<div id="panelTrack" class="hidden">
			<div id="labelUser" class="t1"></div>
			<div id="labelUserMessage"></div>
			<button id="btnLogout">Logout</button>
			<button id="btnShowAddTrack">Add Track</button>

			<!-- Add Track -->
			<div id="panelAddTrack" class="hidden">
				<div id="labelAddTrackMessage"></div>
				Name: <input type="text" id="txtAddTrackName"><br>
				Location: <input type="text" id="txtAddTrackLocation"><br>
				<button id="btnAddTrack">Save</button>
			</div>

			<!-- Track List -->
			<div class="t2">Tracks</div>
			<ul id="listTracks"></ul>

		</div>
	</div>
	<!-- End Navigation Panel -->

	<!-- Main Panel -->
	<div id="frameMain" class="main">

		<div id="frameMainWorking" class="working hidden">
			<img alt="loading" src="loading.gif">
		</div>

		<!-- View track -->
		<div id="panelViewTrack">
			<div id="labelViewTrackName" class="t1"></div>
			<div id="labelViewTrackLocation" class="t2"></div>

			<!-- View Track Points -->
			<div id="panelViewTrackPoints" class="hidden">
				<div class="t3">Points</div>
				<button id="btnShowAddPoint">Add Point</button>
				<div id="panelAddPoint" class="hidden">
					<div id="labelAddPointMessage"></div>
					Latitude: <input type="text" id="txtAddPointLat"> <select
						id="txtAddPointLatN">
						<option value="true">N</option>
						<option value="false">S</option>
					</select> <br> Longitude: <input type="text" id="txtAddPointLon">
					<select id="txtAddPointLonW">
						<option value="true">W</option>
						<option value="false">E</option>
					</select> <br>
					<button id="btnAddPoint">Save</button>
				</div>
				<ul id="listViewTrackPoints"></ul>
			</div>

			<!-- View Point Info -->
			<div id="panelViewPoint" class="hidden">
				<span id="lablePointLat" class="t2"></span> <span id="lablePointLon"
					class="t2"></span>
				<div class="t3">Upload an Image</div>
				<div id="labelUploadMessage"></div>
				<input type="file" id="filePointImage"
					accept="image/jpg">
				<button id="btnUploadPointImage">Upload</button>
				<img id="imgPointImage" class="hidden" style="width: 300px;">
			</div>
		</div>
	</div>

</body>
</html>